<!DOCTYPE HTML>
<htmllang="en-US">
    <head>
        <meta charset="UTF-8">
    	<title>CSS3</title>
       </body>
       </html>
        <!--css-->
        <style type="text/css">
        canvas{background: #ccc}
        span{width:200px;height:50px;line-height:50px;background:#f90;
             display:block;text-align:center;color: #fff;font-size:20px;}
        </style>
        <body>   
          <span>你最擅长的技术是：</span>  
          <!--画布没有单位--> 	
        	<canvas width=600 height=400 id="canvas">
        	</canvas>
        
    <script type="text/javascript">
   			var canvas = document.getElementById("canvas");
        //取得画布上下文
        var cavobj = canvas.getContext("2d");
        //transform 属性向元素应用 2D转换 在这里定义了圆心的位置
        cavobj.translate(200,200);
        //定义一个颜色数组
        var color = ["#B3EE3A","#B4CDCD","#B0E0E6","#EEB422","#EE4000","#EEAD0E","#EECBAD","#7171C6"];
        //定义每个扇形显示的文字
        var text = ["html5","javascript","CSS3","jQuery","php","SEO","前端架构","吹牛逼"];
        var deg = 0;
        //random 0.0 ~ 1.0 之间的一个伪随机数。
        var stop = 20+20*Math.random();
            console.log(Math.random());
            //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。这里为30毫秒
        var t = setInterval(function(){
          if (stop<=0.2) {
              //由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。从而取消对 code 的周期性执行的值。
            clearInterval(t);
              //ceil() 方法可对一个数进行上舍入。天花板 函数
            var textend = Math.ceil(deg/45);
            var deg1;
            if (textend==8) {
              deg1 = text[7];
            }else{
              deg1 = text[text.length-textend-1]
             }
              // 	保存当前环境的状态
              cavobj.save();
           //填充颜色用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个
              // CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时，它被解析为一个
              // CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象，
              // 通过使用指定的渐变或模式来完成填充
           cavobj.fillStyle=color[8-textend];
              //设置字体
           cavobj.font="20px 微软雅黑";
              //对齐方式
           cavobj.textAlign="center";
              //fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。context.fillText(text,x,y,maxWidth);
              // 规定在画布上输出的文本。(x，y位置) 可选。允许的最大文本宽度，以像素计。
           cavobj.fillText(deg1,0,0);
              //返回之前保存过的路径状态和属性
           cavobj.restore();
          }else{

           stop *=0.95;
           deg +=stop;
           if (deg>360) {deg=0;}
              //在给定矩形内清空一个矩形：
          cavobj.clearRect(0,0,800,800);
           //把路径移动到画布中的指定点，不创建线条
          cavobj.moveTo(160,0);
              //添加一个新点，然后在画布中创建从该点到最后指定点的线条
          cavobj.lineTo(300,0);
              //设置或返回当前的线条宽度
          cavobj.lineWidth=5;
              //绘制已定义的路径和颜色
              cavobj.strokeStyle="green";
          cavobj.stroke();
          cavobj.lineWidth=1;
              // 	保存当前环境的状态
          cavobj.save();
              //旋转当前绘图
          cavobj.rotate(deg*Math.PI/180);
          //for循环绘制圆形
          for (var i = 1; i <=color.length; i++) {
              //beginPath() 方法开始一条路径，或重置当前的路径。
           cavobj.beginPath();
           cavobj.moveTo(0,0);
           cavobj.fillStyle=color[i-1];
              //x 	圆的中心的 x 坐标。
             // y 	圆的中心的 y 坐标。
                //r 	圆的半径。
            //  sAngle 	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
                //eAngle 	结束角，以弧度计。
              //counterclockwise 	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
           cavobj.arc(0,0,150,(i-1)*45*Math.PI/180,i*45*Math.PI/180);
              //scale() 方法缩放当前绘图，更大或更小。
           //cavobj.scale(300,300);
              //创建从当前点回到起始点的路径
           cavobj.closePath();
              //绘制
           cavobj.stroke();
           cavobj.fill();
           };
              //填充文字
            for (var i = 0; i < text.length; i++) {
            cavobj.save();
             cavobj.beginPath();
                //旋转
             cavobj.rotate(i*45*Math.PI/180+20);
             cavobj.fillStyle="#666";
             cavobj.font="15px 微软雅黑";
             cavobj.fillText(text[i],70,0);
                //返回之前保存过的路径状态和属性
             cavobj.restore();
           };
           cavobj.beginPath();
           cavobj.fillStyle="#fff";
           cavobj.arc(0,0,50,0,2*Math.PI);
           cavobj.stroke();
           cavobj.fill();
           cavobj.restore();
            }
          },30)
    </script>
        </body>
        </html>